<template>
    <div>
      <vxe-table
        border
        resizable
        highlight-current-row
        row-id="id"
        header-align="center"
        align="center"
        :tree-config="{lazy: true,children: 'children',expandRowKeys: defaultExpandKeys,line: true , hasChild: 'hasChild', loadMethod: loadChildrenMethod}"
        :data="datalist">
        <vxe-table-column field="name" width="50%" title="区域" tree-node>
          <template v-slot="{ row }">
            <div>{{row.name}}</div>
          </template>
        </vxe-table-column>
        <vxe-table-column field="manager" width="50%" title="管理员">
          <template v-slot="{ row }">
              <div v-if="parseInt(row.grade)<6">
                  该级别不展示管理员
              </div>
              <div v-else>
                <div>
                  <h3>{{row.manager}}</h3>
                </div>
              </div>
          </template>
        </vxe-table-column>
<!--        <vxe-table-column field="gradenNum" width="25%" title="网格数量">-->
<!--          <template v-slot="{ row }">-->
<!--            <div v-if="parseInt(row.grade)<6">-->
<!--              <span v-if="row.gradenNum===undefined">0</span>-->
<!--              <span v-else>{{row.gradenNum}}</span>-->
<!--            </div>-->
<!--          </template>-->
<!--        </vxe-table-column>-->
<!--        <vxe-table-column field="buildingNum" width="25%" title="楼数量">-->
<!--          <template v-slot="{ row }">-->
<!--            <div v-if="parseInt(row.grade)<6">-->
<!--              <span v-if="row.buildingNum===undefined">0</span>-->
<!--              <span v-else>{{row.buildingNum}}</span>-->
<!--            </div>-->
<!--            <div v-if="parseInt(row.grade)===6">-->
<!--              <span>{{row.BuildingNum}}</span>-->
<!--            </div>-->
<!--          </template>-->
<!--        </vxe-table-column>-->
      </vxe-table>
    </div>
</template>

<script>
import { findOfficeLevelList, findTreeList } from '@/api/eventlist'

export default {
  name: 'index',
  data () {
    return {
      datalist: [],
      defaultExpandKeys: ['999999999']
    }
  },
  methods: {
    loadChildrenMethod ({ row }) {
      if (parseInt(row.grade) >= 5) {
        return new Promise(resolve => {
          let data = {
            grade: row.grade,
            id: row.id
          }
          findTreeList(data).then(res => {
            if (res.data.errcode === 0) {
              resolve(res.data.data)
            } else {
              this.$Notice.error({
                title: '获取树形结构失败',
                desc: res.data.errmsg
              })
            }
          })
        })
      }
    },
    init () {
      this.tree()
    },
    tree () {
      // 调整缩放程度
      findOfficeLevelList().then(res => {
        if (res.data.errcode === 0) {
          let result = res.data.data
          if (result.grade === '5') {
            result.hasChild = true
          }
          this.datalist.push(result)
          this.pickInfo = result
          if (result.grade === '5') {
            let data = {
              grade: result.grade,
              id: result.id
            }
            findTreeList(data).then(ret => {
              if (ret.data.errcode === 0) {
                let result = ret.data.data
                this.datalist[0].children = result
              } else {
                this.$Notice.error({
                  title: '获取树形结构失败',
                  desc: ret.data.errmsg
                })
              }
            })
          }
        } else {
          this.$Notice.error({
            title: '获取树形结构失败',
            desc: res.data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>

</style>
